import React from 'react';
import {
  View,
  WebView,
  ScrollView,
  Text,
  TouchableOpacity,
  Platform,
  Image
} from 'react-native';

import Video from 'react-native-video';

import Config from '../../config';
import {DateUtils, HtmlUtils} from '../../utils/Utils';
import SizeUtils from '../../common/SizeUtils';
import ToastUtils from '../../common/ToastUtils';
import Constants from '../../common/Constants';
import BasePage from '../common/BasePage';
import TImage from '../../components/TImage';
import TVideoComponent from '../../components/TVideoComponent';
import CommonCommentItemView from '../common/CommonCommentItemView';
import Popover from '../common/Popover';
import ResportView from './ResportView';

import LoginCheckIsUserAction from '../../actions/login/LoginCheckIsUserAction';
import PostRequestLikeAction from '../../actions/post/PostRequestLikeAction';
import PostRequestShoucangAction from '../../actions/post/PostRequestShoucangAction';
import CommonRequestUrlAction from '../../actions/common/CommonRequestUrlAction';
import CommonShowImageFullScreenAction from '../../actions/common/CommonShowImageFullScreenAction';
import QZ_ReportPostOrCommetAction from '../../actions/quanzi/QZ_ReportPostOrCommetAction';
import PopoverConent from '../common/PopoverConent';
import QZ_UpdateTopAction from '../../actions/quanzi/QZ_UpdateTopAction';

const COMMENT_PAGE_SIZE = 10;
const topArr=[{name:'置顶',key:'review'},];
const topArr1=[{name:'取消置顶',key:'review'},];

export default class PostContentPage extends BasePage {
  constructor(props) {
    super(props);

    this.state.postData = this.props.pageData.routeData;
    this.state.isResponeUpdate = false;
    this.state.urlData = "";
    this.state.height = SizeUtils.getWindowSize().height - SizeUtils.translateDesignHeightToCode(global.isIphonex?110:90);
    this.state.showChangeFontSize = false;
    this.state.changeFontSize = 0;
    this.state.likeStatus = 0;
    this.state.shoucangStatus = 0;
    this.state.contentLoading = false;//是否在加载内容
    this.state.commentLoading = false;//是否在加载评论
    this.state.commentLoadComplete = false;//加载评论完成
    this.state.commentData = [];
    this.state.allCommentData = [];
    this.state.isVisible=false;
    this.state.buttonRect={};
    //
    this.state.isUpdateSomething = false;
    this.state.recommendData = [{}, {}, {}];

    this._saveContentPre = "";
    this._saveContentAfter = "";

    this._requestTimer = null;
    this._initShowTag();
    this._goComment = false;
    this._currentCommentPage = 1;
    this._video = null;
    this._offsetY = 0;
    this._viedoHeight = 0;
    this._contentHeight = this._scrollHeight = SizeUtils.getWindowSize().height - SizeUtils.translateDesignHeightToCode(40);
    if(this._showFooterBar === true) {
      this._contentHeight = this._scrollHeight = this._contentHeight - SizeUtils.translateDesignHeightToCode(global.isIphonex?110:90);
    }
    if (this._showHeaderBar === true) {
      this._contentHeight  = this._scrollHeight - SizeUtils.translateDesignHeightToCode(global.isIphonex?110:90);
    }

    this._canVideoFullScreen = false;
    this._videoShowClose = false;

    this._postDataKeyName = "post_id";
    this._requestRecommentTimer = null;
    this._requestCommentTimer = null;
  }

  _initShowTag() {
    this._showShare = true;
    this._showFontSize = true;
    this._showComment = true;
    this._showShoucang = true;
    this._showZan = true;
    this._showFooterBar = true;
    this._showHeaderBar = true;
    this._showTag = false;
    this._showImages = false;
    this._showRecommend = false;
    this._showCommentAfterContent = false;
  }

  _dealAfterEnterAnimation() {
    this._requestData();
  }

  _dealEnterPage() {
    super._dealEnterPage();
    if(this._goComment === true) {
      this._goComment = false;
      return;
    }
    if(this._checkDataSame(this.state.postData, this.props.pageData.routeData) === false) {
      this.state.postData = this.props.pageData.routeData;
      // this.state.urlData = "";
    }
    this.state.isUpdateSomething = false;
    this.state.commentLoading = false;
    this.state.contentLoading = false;
    this.state.commentData = [];
    this.state.allCommentData = [];
    this._currentCommentPage = 1;
  }

  _dealLeavePage() {
    if(this._goComment === true) {
      return;
    }
    this.props.pageData.routeData.chageBrowse&&this.props.pageData.routeData.chageBrowse(this.state.postData.readers_num,this.state.postData.likers_num);
    super._dealLeavePage();
    this._viedoHeight=0;
    this.state.commentData = [];
    this.state.allCommentData = [];
    this._currentCommentPage = 1;
    this.state.urlData = "";
    this.state.data = null;
    this.state.postData = {title:"", content:"", source_url:""};
    this.state.updateParams = {};
  }

  _checkDataSame(leftData, rightData) {
    return leftData != undefined && rightData != undefined && leftData[this._postDataKeyName] === rightData[this._postDataKeyName];
  }

  componentWillUpdate(nextProps, nextState) {
    if(nextState.isResponeUpdate) {
      nextState.isResponeUpdate = false;
      nextState.postData = nextState.data;
      if(nextState.postData&&nextState.postData.content && nextState.postData.content.indexOf("http") == 0 && nextState.urlData == "") {
        this._requestContent(nextState.postData.content);
      }
      if(this._showCommentAfterContent === true) {
        this._requestCommentList();
      }
      if(this._checkDataSame(this.state.data, nextState.data) === false) {
        this._dealAfterPostDataChange(nextState);
      }
    }
    if(nextState.needRefresh || nextState.updateByLike || nextState.updateByShoucang) {
      nextState.needRefresh = false;
      nextState.updateByLike = false;
      nextState.updateByShoucang = false;
      nextState.isUpdateSomething = false;
      this._requestData();
      if(nextState.statusText != "") {
        ToastUtils.show(nextState.statusText);
        nextState.statusText = "";
      }
    }
    if(nextState.commentLoadComplete === true) {
      nextState.commentLoadComplete = false;
      // console.log(nextState.commentData);
      if(nextState.commentData === undefined || nextState.commentData === null ||
        (nextState.commentData instanceof Array) === false) {
          nextState.allCommentData = [];
      }
      else {
        this._dealCommentData(nextState);
      }
      this._dealCommentPage(nextState);
    }
    if(nextState.statusText && nextState.statusText != "") {
      ToastUtils.show(nextState.statusText);
      nextState.statusText = "";
    }
  }

  _dealAfterPostDataChange(nextState) {
    this._requestRecommentList(nextState);
  }

  _requestRecommentList(nextState) {
    clearTimeout(this._requestRecommentTimer);
    this._requestRecommentTimer = setTimeout(()=>{
     clearTimeout(this._requestRecommentTimer);
       var topics = nextState.postData.topics;
       if(topics && topics.length > 0) {
         var sendData = {page:1, tag:0, page_size:5, updateParamName:"recommendData"};
           // new NewsRequestNewsByTopicsAction().call(this, {page:1, tag:0, topics:topics, page_size:5, updateParamName:"recommendData"})
           this._sendRequestRecommentListAction(sendData);
       }
    }, 1000);
  }

  _sendRequestRecommentListAction(sendData) {

  }

  _dealCommentData(nextState) {
    for (var i = 0; i < nextState.commentData.length; i++) {
      let existIndex = this._checkCommentExist(nextState.allCommentData, nextState.commentData[i].comment_id);
      if(existIndex >= 0) {
        nextState.allCommentData[existIndex] = nextState.commentData[i];
      }
      else {
        nextState.allCommentData.push(nextState.commentData[i]);
      }
    }
    // nextState.allCommentData.sort(this._sortData.bind(this));
  }

  _sortData(aData, bData) {
    let aDate1 = DateUtils.getDate(aData.commented_at);
    let bDate2 = DateUtils.getDate(bData.commented_at);
    return DateUtils.compareDate(aDate1, bDate2);
  }

  _checkCommentExist(allCommentData, comment_id) {
    for (var i = 0; i < allCommentData.length; i++) {
      if(allCommentData[i].comment_id === comment_id) {
        return i;
      }
    }
    return -1;
  }

  _getShareData() {
    return {type:Constants.MODULE_TYPE.WORK_HARD,board_id:this.state.postData.board_id,
      post_id:this.state.postData.post_id,title:this.state.postData.title}
  }

  _dealCommentPage(nextState) {
    this._currentCommentPage = 1;
    if(nextState.allCommentData.length > 0) {
      this._currentCommentPage = nextState.allCommentData.length / COMMENT_PAGE_SIZE;
      if(nextState.allCommentData.length % COMMENT_PAGE_SIZE > 0) {
        this._currentCommentPage = parseInt(this._currentCommentPage + 1);
      }
    }
  }

  render() {
    if(this.state.leave === true && this._goComment === false) {
      return this._renderEmptyView();
    }
    var displayArea = {x: 0, y: 0, width: SizeUtils.getWindowSize().width-10, height: 260};
    return(
      <View style={{paddingTop:this.props.pageData.routeData.isPing?0:Config.statusBarHeight,
          height:SizeUtils.getWindowSize().height,
          backgroundColor:"#ffffff"}}>
        {this.props.pageData.routeData.isPing?
          <View style={{backgroundColor:'#ee3535',height:Config.statusBarHeight}}/>:null}
        <View style={{height:this._scrollHeight}}>
          {this._renderHeaderBar()}
          {this._renderVideoContentSpace()}
          <ScrollView ref={(ref) => this._scrollView = ref}
           style={{backgroundColor:"#33333300",
            width:SizeUtils.getWindowSize().width,
            height:this._scrollHeight - this._viedoHeight}}
            onContentSizeChange = {this._onContentSizeChange.bind(this)}
            onScroll={this._onScroll.bind(this)}
          >
            {this._renderView()}
          </ScrollView>
        </View>
        {this._renderChangeFontSize()}
        {this._renderFooterBar()}
        {this._renderShareView()}
        {this._renderNavigationBar()}
        {this._renderVideoContent()}
        {
         this.props.pageData.routeData.isPing? 
         <View style={{width:SizeUtils.getWindowSize().width,
            backgroundColor:'#ff0',flexDirection:'row',
            position:'absolute',bottom:0,right:0,
            height:SizeUtils.translateDesignHeightToCode(110)}}>
        <TouchableOpacity activeOpacity={0.85} style={{flex:1,backgroundColor:'#ffc007',
          alignItems: 'center',justifyContent: 'center',}}
          onPress={this._onPressWriteButton.bind(this,false)}>
          <Text style={{color:'#fff',fontSize:SizeUtils.translateFontSizeToCode(34)}}>
            {'弃权'}
          </Text>
        </TouchableOpacity>
        <View style={{backgroundColor:'#fff',width:1}}/>
        <TouchableOpacity activeOpacity={0.85} style={{flex:1,backgroundColor:'#ee3535',
          alignItems: 'center',justifyContent: 'center',
          }}
          onPress={this._onPressWriteButton.bind(this,true)}>
          <Text style={{color:'#fff',fontSize:SizeUtils.translateFontSizeToCode(34)}}>
            {'投票'}
          </Text>
        </TouchableOpacity>
      </View>:null
        }
        <Popover
            isVisible={this.state.isVisible}
            fromRect={this.state.buttonRect}
            placement={this.state.isBottom?'bottom':'top'}
            isWhite={true}
            arrowSize={{height:10,width:15}}
            displayArea={displayArea}
            onClose={this._closePopover.bind(this)}>
            <View style={{width:this.state.isBottom? 160:SizeUtils.getWindowSize().width-40,height:this.state.isBottom?40:260,backgroundColor:'transparent',}}>
              {
                !this.state.isBottom?<ResportView popoverPress={this._PopoverPress.bind(this)}/>:
                <PopoverConent titleArr={ this.state.postData.top===1?topArr1:topArr} popoverPress={this._PopoverPress.bind(this)}/>
              } 
            </View>
        </Popover>
      </View>
    )
  }
  _onPressWriteButton(isYes){

  }
  _PopoverPress(key){
    this._closePopover(); 
  }
  _closePopover(){
    this.setState({isVisible: false});
  }
  _renderView() {
    return (
      <View style={{marginLeft:SizeUtils.translateDesignWidthToCode(0),
        marginRight:SizeUtils.translateDesignWidthToCode(0), flexDirection:"column"}}>
        {this._renderTitle()}
        {this._renderSourceAndTime()}
        {this._renderBeforeContent()}
        {this._renderShowImages()}
        {this._renderContent()}
        {this._renderZanView()}
        {this._renderTag()}
        {this._renderAfterContent()}
        {this._renderRecommend()}
        {this._renderComment()}
      </View>
    )
  }

  _renderShowImages() {
    if(this._showImages === false) {
      return;
    }
    if(this.state.postData.image_urls) {
        return (
          <View style={{paddingTop:SizeUtils.translateDesignHeightToCode(20),
            marginLeft:SizeUtils.translateDesignWidthToCode(40),
            marginRight:SizeUtils.translateDesignWidthToCode(40),}}>
            {
              this.state.postData.image_urls.map(
                (image_url, index) => {
                  return this._renderShowImage(image_url, index);
                }
              )
            }
          </View>
        )
    }
  }

  _renderShowImage(image_url, index) {
    let width = SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(80);
    return(
      <View key={index} style={{width:width,
          height:SizeUtils.translateDesignWidthToCode(420), backgroundColor:"#00000000"}}>
        <TImage source={{uri:image_url}} resizeMode="contain" onPress={{type:["fullScreen"]}}
          isMini={true} style={{width:width,
            height:SizeUtils.translateDesignWidthToCode(400)}} translatedSize={true}
          />
      </View>
    )
  }

  _renderTag() {
    if(this._showTag === false) {
      return;
    }
    return(
      <View style={{backgroundColor:"#ffffff", borderRadius:SizeUtils.translateDesignNumToCode(30),borderColor:"#eeeeee",
          borderWidth:SizeUtils.translateDesignNumToCode(3),
          justifyContent:"center",alignItems:"center",
          width:SizeUtils.translateDesignWidthToCode(180), height:SizeUtils.translateDesignWidthToCode(55),
          marginLeft:SizeUtils.translateDesignNumToCode(40),
          marginTop:SizeUtils.translateDesignNumToCode(50), marginBottom:SizeUtils.translateDesignHeightToCode(50)}}>
        <Text style={{color:"#333333", backgroundColor:"#00000000", fontSize:SizeUtils.translateFontSizeToCode(26),
         width:SizeUtils.translateDesignWidthToCode(180),
         textAlign:"center",}}>
         {this._getTabText()}
       </Text>
      </View>
    )
  }

  _getTabText() {
    return "错误类型";
  }

  _renderComment() {
    if(this._showCommentAfterContent === false || this.state.contentLoading === true) {
      return;
    }
    return (
      <View>
        {this._renderCommentTitle()}
        {this._renderCommentList()}
      </View>
    )
  }

  _renderRecommend() {
    if(this._showRecommend === false || this.state.contentLoading === true) {
      return;
    }
    if(this.state.updateParams && this.state.updateParams["recommendData"] && this.state.updateParams["recommendData"].length > 0) {
      var postData = null;
      var render = false;
      for (var i = 0; i < this.state.updateParams["recommendData"].length; i++) {
        postData = this.state.updateParams["recommendData"][i];
        if(this.state.postData[this._postDataKeyName] != postData[this._postDataKeyName]) {
          render = true;
          break;
        }
      }
      if(render === false) {
        return null;
      }
      return (
        <View style={{flexDirection:"column", width:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(80),
            paddingTop:SizeUtils.translateDesignHeightToCode(30),
            paddingBottom:SizeUtils.translateDesignHeightToCode(20),
            marginLeft:SizeUtils.translateDesignWidthToCode(40),
            marginRight:SizeUtils.translateDesignWidthToCode(40),
            borderColor:"#db3132", borderTopWidth:SizeUtils.translateDesignNumToCode(8),
          }}>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(32),
              color:"#db3132", fontWeight:"bold"}}>
              相关阅读:
          </Text>
          <View style={{flexDirection:"column", marginTop:SizeUtils.translateDesignHeightToCode(30),
              borderColor:"#db3132", borderTopWidth:SizeUtils.translateDesignNumToCode(3),}} >
            {this.state.updateParams["recommendData"].map((data, index) => {
              if(this.state.postData[this._postDataKeyName] === data[this._postDataKeyName]) {
                return null;
              }
              return this._renderRecommendItem(data, index);
            })}
          </View>
        </View>
      )
    }
  }

  _renderRecommendItem(data, index) {
    return (
      <View key={index} style={{flexDirection:"row"}}>
        <TImage style={{width:100, height:80}} source={require("../../../resource/images/common/share.png")}/>
        <View style={{flexDirection:"column", paddingLeft:SizeUtils.translateDesignWidthToCode(20)}}>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(28)}}>
            标题
          </Text>
          <Text style={{paddingTop:SizeUtils.translateDesignHeightToCode(26), fontSize:SizeUtils.translateFontSizeToCode(24)}}>
            content
          </Text>
        </View>
      </View>
    )
  }

  _renderBeforeContent() {

  }

  _renderAfterContent() {

  }

  _onScroll(event) {
    let y = event.nativeEvent.contentOffset.y
    if(this._offsetY < y) {
      //表示向下拉
      if((this._contentHeight > this._scrollHeight && y > (this._contentHeight - this._scrollHeight - 10)) ||
          (this._contentHeight < this._scrollHeight && y > 0)) {
        // console.log("加载更多");
        this._reachEndLoad();
      }
    }
    this._offsetY = y;
  }

  _onContentSizeChange(contentWidth, contentHeight) {
    this._contentHeight = contentHeight;
  }

  _renderCommentTitle() {
    return (
      <View style={{marginTop:20,backgroundColor:"#eeeeee", height:SizeUtils.translateDesignHeightToCode(20)}}>
      </View>
    )
  }
  _renderCommentList() {
    if(this.state.allCommentData.length === 0) {
      return (
        <View style={{paddingTop:SizeUtils.translateDesignHeightToCode(30),
          marginLeft:SizeUtils.translateDesignWidthToCode(40),
          marginRight:SizeUtils.translateDesignWidthToCode(40),}}>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(28), height:SizeUtils.translateDesignHeightToCode(80)}}>
            暂无评论
          </Text>
        </View>
      )
    }
    return this.state.allCommentData.map(
      (data, index) => {
        return (<View  key={index} style={{
          marginLeft:SizeUtils.translateDesignWidthToCode(40),
          marginRight:SizeUtils.translateDesignWidthToCode(40),
        }}><CommonCommentItemView onReply={this._onReply.bind(this)} type={this._getModuleType()} data={data} key={index}/></View>);
      }
    )
  }
  _onReply(item,selectItem){
    var titleName = '';
    var it = {};
    const {userData} = this.props.pageData.prePageData.routeData;
    if (selectItem) {
      titleName=userData.nick===selectItem.by_name?item.by_name:selectItem.by_name;
      it.news_id=item.news_id;
      it.comment_id=item.comment_id;
      it.by_user_id= userData.nick===selectItem.by_name?item.by_user_id:selectItem.by_user_id;
    }else{
      titleName=item.by_name;
      it.comment_id=item.comment_id;
      it.news_id=item.news_id;
      it.by_user_id=item.by_user_id;
    }
    console.log(item,selectItem)
    if (item.board_id!==undefined) {
      it.board_id=item.board_id;
      it.post_id=item.post_id;
    }
    this._goComment = true;
    this._video && this._video.paused();
    this.gotoPage(Config.pages.common_comment, {
      data:this._getPostData(),
      item:it,
      followitem:selectItem,
      title:'回复@'+titleName,
      moduleType:this._getModuleType()});
  }
  _renderTitle() {
    return (
      <Text style={{fontSize:SizeUtils.translateFontSizeToCode(48), color:"#333333",
        paddingTop:SizeUtils.translateDesignHeightToCode(30),
        marginLeft:SizeUtils.translateDesignWidthToCode(40),
        marginRight:SizeUtils.translateDesignWidthToCode(40),
        fontWeight:"bold"}}>
        {this.state.postData.title ? this.state.postData.title : ""}
      </Text>
    )
  }
  //标签
  _renderContentItemTagPer(isf,tag) {
    return (
      <View style={{marginTop:SizeUtils.translateDesignHeightToCode(28),backgroundColor:'#fff', borderRadius:SizeUtils.translateDesignNumToCode(14),
      height:SizeUtils.translateDesignHeightToCode(38),
        marginLeft:SizeUtils.translateDesignWidthToCode(40),
         borderColor:!isf?'#999999':'#ee3535', borderWidth:0.5, marginRight:SizeUtils.translateDesignWidthToCode(10),
          flexDirection:"row", justifyContent:"center", alignItems:"center"}}>
        <Text style={{color:!isf?'#999999':'#ee3535', fontSize:SizeUtils.translateFontSizeToCode(26),
         textAlign:"center",
          marginLeft:SizeUtils.translateDesignWidthToCode(14), marginRight:SizeUtils.translateDesignWidthToCode(14)}}>
         {tag}
       </Text>
      </View>
    )
  }
  _renderSourceAndTime() {
    return (
      <View style={{flexDirection:'row',alignItems: 'center',}}>
        {this.props.pageData.routeData.isPing?this._renderContentItemTagPer(false,'未评论'):null}
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(24), color:"#999999",
          marginLeft:SizeUtils.translateDesignWidthToCode(this.props.pageData.routeData.isPing?10:40),
          marginRight:SizeUtils.translateDesignWidthToCode(40),
          marginTop:SizeUtils.translateDesignHeightToCode(28)}}>
          {this._getSource()}
        </Text>
      </View>
    )
  }

  _getSource() {
    let name = ""
    if(this.state.postData.source != undefined) {
      name = "来自:" + this.state.postData.source;
    }
    else if (this.state.postData.by_name != undefined) {
      name = this.state.postData.by_name;
    }
    source = name + "  " + DateUtils.formatDate2(this.state.postData.posted_at);
    return source;
  }

  _renderContent() {
    // if(this.state.postData.video_url) {
      // return this._renderVideoContent();
    // }
    // else {
      return this._renderWebViewContent();
    // }
  }
  _renderZanView(){
    if(this._showZan === false) {
      return;
    }
    return(
      <View style={{
        height:SizeUtils.translateDesignHeightToCode(100),
        alignItems: 'center',justifyContent: 'center',
      }}>
        <TouchableOpacity onPress={this._onPressLikeBtn.bind(this)} style={{
          width:SizeUtils.translateDesignWidthToCode(200),
          height:SizeUtils.translateDesignHeightToCode(60),
          borderRadius:SizeUtils.translateDesignHeightToCode(60),
          borderWidth:0.5,
          borderColor:'#ee3535',
          justifyContent: 'center',alignItems: 'center',
          flexDirection:'row',
        }}>
          <TImage source={require("../../../resource/images/common/dianzan.png")}
              style={{width:34, height:34}}/>
            <Text style={{marginLeft:5,color:'#ee3535',fontSize:SizeUtils.translateFontSizeToCode(22)}}>{this._getLinkNum()}
            </Text>
        </TouchableOpacity>
      </View>
    );
  }
  _renderWebViewContent() {
    return (<WebView style={{width:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(80),
      marginLeft:SizeUtils.translateDesignWidthToCode(40),
      marginRight:SizeUtils.translateDesignWidthToCode(40),
      marginTop:SizeUtils.translateDesignHeightToCode(36),
      height:this.state.height - SizeUtils.translateDesignHeightToCode(76 - 20)}}
    onNavigationStateChange={(title)=>{
      // console.log("onNavigationStateChange",title)
        if(title.title != undefined) {
          this.setState({
            height:(parseInt(title.title)+60)
          })
        }
        if(title.url && title.url!="" && title.url.indexOf("about:blank")<0
            && title.url.indexOf("react-js-navigation://postMessage") < 0
            && title.url.indexOf("data:text/html") != 0){
          var myUrl = title.url;
          if(Platform.OS === "android" && (myUrl.indexOf(".doc") > 0 || myUrl.indexOf(".xls") > 0 || myUrl.indexOf(".ppt") > 0)){
            myUrl = "https://view.officeapps.live.com/op/view.aspx?src=" + myUrl;
          }
          this.gotoPage(Config.pages.post_common_web, {url:myUrl});
        }
      }}
    scrollEnabled={false}
    javaScriptEnabled={true}
    onMessage={this._onWebViewMessage.bind(this)}
    source={HtmlUtils.getHtmlWeb(this._getContent(this.state.postData),
      SizeUtils.getWindowSize().width-SizeUtils.translateDesignWidthToCode(80))}
    />);
  }

  _onWebViewMessage(event) {
    if(!event.nativeEvent.data){
      return;
    }
    let dataArr = event.nativeEvent.data.split("#1#");
    new CommonShowImageFullScreenAction().call(this, {source:dataArr[0], isNeedSave:true})
  }

  _getContent(postData){
    let content = "加载中...";
    let hasContent = false;
    if(postData.content && postData.content.indexOf("http") != 0) {
      if(this._saveContentPre === postData.content) {
        content = this._saveContentAfter;
      }
      else {
        content = HtmlUtils.contentFormatImg(postData.content);
      }
      hasContent = true;
    }
    else if(this.state.urlData != ""){
      if(this._saveContentPre === this.state.urlData) {
        content = this._saveContentAfter;
      }
      else {
        content = HtmlUtils.contentFormatImg(this.state.urlData);
      }
      hasContent = true;
    }
    this._saveContentPre = postData.content;
    this._saveContentAfter = content;

    if(hasContent) {
      content = `<div style="font-size:20px">` + content + `</div>`;
      content = HtmlUtils.contentFontSizeScale(content, this.state.changeFontSize)
    }
    else {
      content = `<div style="font-size:14px;text-align='center'">` + content + `</div>`;
    }
    return content;
  }

  //空白的，占位置
  _renderVideoContentSpace() {
    if(this.state.postData.video_url == "" || this.state.postData.video_url == null
      || this.state.postData.video_url == undefined) {
        return;
      }
    this._viedoHeight = SizeUtils.translateDesignHeightToCode(450);
    return (
      <View style={{width:SizeUtils.getWindowSize().width,
        height:SizeUtils.translateDesignHeightToCode(450),
      }} >
      </View>
    )
  }

  _renderVideoContent() {
    if(this.state.postData.video_url == "" || this.state.postData.video_url == null
      || this.state.postData.video_url == undefined) {
        return;
      }
    return (
      <View style={{width:SizeUtils.getWindowSize().width,
        height:SizeUtils.translateDesignHeightToCode(450),
        position:"absolute",
      }} >
        <TVideoComponent style={{
          width:SizeUtils.getWindowSize().width,
          height:SizeUtils.translateDesignHeightToCode(420)}}
          videoUrl = {this.state.postData.video_url}
          showClose = {this._videoShowClose}
          canFullScreen = {this._canVideoFullScreen}
          ref={(ref) => this._video = ref}
        />
      </View>
    )
  }
  _replaceHtml(str) {
    return HtmlUtils.contentFormat(str);
  }

  _getContentItem(per, index) {
    if(per.indexOf("data:image") == 0) {
      //<img src=""">
      //uri: '
      // per = per.replace("<img src=\"", "");
      per = per.split("style")[0];
      per = per.substring(0, per.length - 2);
      return (
        <View key={index}>
          <Image source={{uri: per}}
            style={{flex:1,
              height:200,
              resizeMode: Image.resizeMode.contain}}
            onLoad={(event) => {
              // Currently this image source feature is only available on iOS.
              if (event.nativeEvent.source) {
                let url = event.nativeEvent.source.url;
              }
            }}/>
        </View>
      )
    }
    else {
      return (
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(30), color:"#333333",
          lineHeight:SizeUtils.translateDesignHeightToCode(50), backgroundColor:"#00000000", borderWidth:0}}>
          {this._replaceHtml(per)}
        </Text>
      )
    }
  }

  _renderChangeFontSize(){
    if(this.state.showChangeFontSize){
      return(
        <View >
          <View style={{backgroundColor:"#c9c9c9dd", flexDirection:"row",
              position:"absolute", width:SizeUtils.getWindowSize().width,
              bottom:SizeUtils.translateDesignHeightToCode(90),
              height:SizeUtils.translateDesignHeightToCode(90),
              alignItems: "center", justifyContent:'space-around'}}>
              <TouchableOpacity onPress={() => {this._changeFontSize(0)}} >
                <Text style={{fontSize:SizeUtils.translateFontSizeToCode(30)}}>
                  A-
                </Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={() => {this._changeFontSize(1)}} >
                <Text style={{fontSize:SizeUtils.translateFontSizeToCode(30)}}>
                  A=
                </Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={() => {this._changeFontSize(2)}} >
                <Text style={{fontSize:SizeUtils.translateFontSizeToCode(30)}}>
                  A+
                </Text>
              </TouchableOpacity>
          </View>
        </View>
      )
    }
  }

  _changeFontSize(type) {
    let newChangeSize = this.state.changeFontSize;
    if(type === 0) {
      newChangeSize -= 2;
      if(newChangeSize < -8) {
        newChangeSize = -8;
      }
    }
    else if (type === 1) {
      newChangeSize = 0;
    }
    else if(type === 2){
      newChangeSize += 2;
      if(newChangeSize > 8) {
        newChangeSize = 8;
      }
    }
    this.setState({
      changeFontSize:newChangeSize,
    })
  }

  _onBackPress(){
    this.goBack();
    this._saveContentPre = "";
    this._saveContentAfter = "";
    this.setState({
      showChangeFontSize:false,
      changeFontSize:0,
    });
  }
  _renderHeaderBar() {
    if(this._showHeaderBar === false||this._viedoHeight>0) {
      return;
    }
      return (
        <View style={{flexDirection:"row", height:SizeUtils.translateDesignHeightToCode(90),
            width:SizeUtils.getWindowSize().width,
            justifyContent:"space-between",
            alignItems: "center",
            paddingRight:SizeUtils.translateDesignWidthToCode(20),
            paddingLeft:SizeUtils.translateDesignWidthToCode(40),
            borderBottomWidth:this.props.pageData.showBottomBorder == false ? 0 : SizeUtils.translateDesignNumToCode(3),
            borderColor:"#eeeeee",
            backgroundColor:this.props.pageData.routeData.isPing?"#ee3535":'#ffffff'}}>
            {this._renderBackButton()}
            {this._renderShareButtom()}
        </View>
      )
  }
  _renderFooterBar() {
    if(this._showFooterBar === false) {
      return;
    }
    return(
      <View style={{width:SizeUtils.getWindowSize().width, position:"absolute",
          flexDirection:"row", justifyContent:"space-between",
          height:SizeUtils.translateDesignHeightToCode(global.isIphonex?110:90),
          paddingBottom:SizeUtils.translateDesignHeightToCode(global.isIphonex?20:0),
          bottom:0, paddingLeft:SizeUtils.translateDesignWidthToCode(40),
          paddingRight:SizeUtils.translateDesignWidthToCode(40),
          alignItems: "center", borderTopWidth:1,borderTopColor:"#cccccc",
          backgroundColor:"#ffffff"}}>
          {this._viedoHeight>0?this._renderBackButton():<View style={{width:0}}/>}
          {this._viedoHeight<1?<View style={{flex:1,height:SizeUtils.translateDesignHeightToCode(90),justifyContent:'center',}}>
            <TouchableOpacity onPress={this._onPressCommentButton.bind(this)} style={{flex:1,height:SizeUtils.translateDesignHeightToCode(60),
              marginTop:SizeUtils.translateDesignHeightToCode(15),
              marginBottom:SizeUtils.translateDesignHeightToCode(15),
              borderRadius:SizeUtils.translateDesignHeightToCode(60),
              alignItems: 'center',
              flexDirection:'row',
              backgroundColor:'#f4f5f6'}}>
              <TImage resizeMode={"contain"} source={require("../../../resource/images/common/xiepinglun.png")}
                style={{marginLeft:15,marginRight:5,width:32, height:32}}/>
                <Text>写评论...</Text>
            </TouchableOpacity>
          </View>:null}
        <View style={{flexDirection:"row", height:SizeUtils.translateDesignHeightToCode(90),}}>
          {this._renderShoucangButton()}
          {this._renderCommentButtom()}
          {this._viedoHeight>0?this._renderShareButtom():null}

        </View>
      </View>
    )
  }

  _renderBackButton() {
    return (
      <TouchableOpacity onPress={this._onBackPress.bind(this)} 
        style={{width:SizeUtils.translateDesignWidthToCode(100),width:SizeUtils.translateDesignWidthToCode(80)}}>
        <TImage resizeMode={"contain"} source={
          this.props.pageData.routeData.isPing? require("../../../resource/images/common/Back-icon2.png"):require("../../../resource/images/common/Back-icon.png")}
              style={{width:32, height:32}}/>
      </TouchableOpacity>
    )
  }

  _renderFontSizeButton() {
    if(this._showFontSize === false) {
      return;
    }
    return this._renderCommonButton(require("../../../resource/images/common/ziti.png"),
      43, 43,
      false, "", this._onPressFontSizeButton.bind(this));
  }

  _onPressFontSizeButton() {
    this.setState({showChangeFontSize:!this.state.showChangeFontSize})
  }

  _renderShoucangButton() {
    if(this._showShoucang === false) {
      return;
    }
    return this._renderCommonButton(this._getShoucangImageSource(),
      44, 44,
      true, this._getShoucangNum(), this._onPressShoucangBtn.bind(this));
  }

  _getShoucangImageSource() {
    if(this.state.is_favorited == 1) {
      return require("../../../resource/images/common/shoucang1.png");
    }
    else {
      return require("../../../resource/images/common/shoucang.png");
    }
  }

  _getShoucangNum() {
    var num = this.state.postData.favoriters_num;
    if(num == 0 ){
      return "";
    }
    return num;
  }

  _onPressShoucangBtn() {
    new LoginCheckIsUserAction().call(this, {content:"你是游客身份，不能使用此功能"} , (result) => {result && this._checkLoginDone("shoucang")})
  }

  _checkLoginDone(type) {
    if(type == "like") {
      if(this.state.likeStatus != 2) {
        this._sendLikeAction();
      }
    }
    else if (type == "shoucang") {
      if(this.state.shoucangStatus != 2) {
        this._sendShoucangAction();
      }
    }
  }
  _sendReportAction(obj) {
    if(this.state.isUpdateSomething){
      return;
    }
    new QZ_ReportPostOrCommetAction().call(this,{...obj,target_id:obj.target_type===0?this.state.postData.post_id:''} );
  }
  _sendUpdateTopAction(obj) {
    if(this.state.isUpdateSomething){
      return;
    }
    new QZ_UpdateTopAction().call(this,{top:this.state.postData.top===1?0:1,board_id:this.state.postData.board_id,post_id:this.state.postData.post_id} );
  }
  _sendLikeAction() {
    if(this.state.isUpdateSomething){
      return;
    }
    new PostRequestLikeAction().call(this, this.state.postData);
  }

  _sendShoucangAction() {
    if(this.state.isUpdateSomething){
      return;
    }
    new PostRequestShoucangAction().call(this, this.state.postData);
  }

  _getZanImageSource() {
    if(this.state.is_liked == 1) {
      return require("../../../resource/images/common/dianzan.png");
    }
    else {
      return require("../../../resource/images/common/zan.png");
    }
  }

  _getLinkNum() {
    var likers_num = this.state.postData.likers_num;
    if(likers_num == 0) {
        return "";
    }
    return this.state.postData.likers_num;
  }

  _onPressLikeBtn() {
    new LoginCheckIsUserAction().call(this, {content:"你是游客身份，不能使用此功能"} , (result) => {result && this._checkLoginDone("like")})
  }

  _renderCommentButtom() {
    if(this._showComment === false) {
      return;
    }
    return this._renderCommonButton(require("../../../resource/images/common/chat.png"),
      44, 44,
      true, this._getPostNum(), this._onPressCommentButton.bind(this));
  }

  _onPressCommentButton() {
    this._goComment = true;
    // this._video && this._video.paused();
    this.gotoPage(Config.pages.common_comment, {
      data:this._getPostData(),
      moduleType:this._getModuleType()});
  }

  _getModuleType() {
    console.error("此方法必须继承");
  }

  _renderShareButtom() {
    if (this.props.pageData.routeData.isPing) {
      return;
    }
    if(this._showShare === false) {
      return;
    }
    return this._renderCommonButton(require("../../../resource/images/common/share.png"),
      36, 36,
      false, "", this._onPressShareButton.bind(this));
  }

  _renderCommonButton(source, sourceWidth, sourceHeight, showText, text, onPress) {
    return(
      <TouchableOpacity style={this._getBottomBarButtonStyle()} onPress={onPress}>
        <TImage source={source}
              style={{width:sourceWidth, height:sourceHeight}}/>
        {this._renderCommonButtonText(showText, text)}
      </TouchableOpacity>
    )
  }

  _renderCommonButtonText(showText, text) {
    if(showText === true) {
      return (
        <Text style={this._getBottomBarButtonTextStyle()}>{text}
        </Text>
      )
    }
  }

  _onPressShareButton() {
    this.setState({showShare:true});
  }

  _getBottomBarButtonStyle() {
    return {
      flexDirection: "row",
      alignItems:"center",
      marginLeft:SizeUtils.translateDesignWidthToCode(20),
      marginRight:SizeUtils.translateDesignWidthToCode(20),
      height:SizeUtils.translateDesignHeightToCode(90)
    }
  }

  _getBottomBarButtonTextStyle() {
    return {
      padding:0,fontSize:SizeUtils.translateFontSizeToCode(22),
      color:"#db3132",
      backgroundColor:"#00000000",
      borderWidth:0,
      top:SizeUtils.translateDesignWidthToCode(16),
      position:"absolute",
      left:SizeUtils.translateDesignWidthToCode(46)
    }
  }

  _getPostData() {
    return this.state.postData;
  }

  _getPostNum() {
    var num = this.state.postData.comments_num;
    if(num == 0 ){
      return "";
    }
    return num;
  }

  _requestData() {
    clearTimeout(this._requestTimer);
    this._requestTimer = setTimeout(()=>{
     clearTimeout(this._requestTimer);
     if(this.state.leave === false) {
       this._sendRequestDataAction();
     }
    }, 300);
  }

  _reachEndLoad() {
    this._requestCommentList();
  }

  _requestCommentList() {
    if(this.state.commentLoading === true || this._showCommentAfterContent === false) {
      return;
    }
    clearTimeout(this._requestCommentTimer);
    this._requestCommentTimer = setTimeout(()=>{
     clearTimeout(this._requestCommentTimer);
     let page = this._currentCommentPage;
     if(this.state.allCommentData.length > 0 && this.state.allCommentData.length % COMMENT_PAGE_SIZE === 0) {
       page = page + 1;
     }
     this._sendRequestCommentListAction(page);
    }, 1000);
  }

  _sendRequestCommentListAction(page) {

  }

  _sendRequestDataAction() {

  }

  _requestContent(content) {
    new CommonRequestUrlAction().call(this, {url:content})
  }
}
